<template>
	<view class="category-wrap">
		<u-navbar class="navbar" :is-back="false" :is-fixed="true" :background="background" height="96" width="100%">
			<div class="title">分类</div>
			<div class="navbar-solt-div">

				<!-- #ifdef H5 -->
				<u-search class="nav-search" @click.native="search" placeholder="搜索您想了解的商品" :show-action="false">
				</u-search>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<u-search class="nav-search" disabled @click.native="search" placeholder="搜索您想了解的商品"
					:show-action="false"></u-search>
				<!-- #endif -->
				<div class="searchText">搜索</div>
			</div>
		</u-navbar>
		<view class="content">
			<scroll-view scroll-y scroll-with-animation class="left-aside">
				<view v-for="(item, index) in tabList" :key="item.id" class="f-item b-b"
					:class="{ active: item.id == currentId }" @click="tabtap(item, index)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100" :scroll-y="true"
				:lower-threshold="-100" @scrolltolower="handleScrolltoupper" lower-threshold="100">
				<view v-for="item in categoryList" :key="item.id" class="s-list" :id="'main-' + item.id"
					@click.stop="showProductguige(item)">
					<view class="t-list">
						<view class="t-item">
							<view class="productimg">
								<u-image width="197rpx" height="197px" :src="item.image" :lazy-load="true">
								</u-image>
							</view>
							<text class="producttext">{{ item.name }}</text>
							<!-- <text class="productprice"> ¥{{item.price}} </text> -->

							<div class="proItems_car" @click.stop="jindian(item)">
								<!-- <image src="/static/newImg/car.png" style="width: 100%; height: 100%"></image> -->
								进店
							</div>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-popup v-model="carshow" mode="bottom" :closeable="true" :mask-close-able="false">
			<view class="carshowview">
				<view class="goods-header">
					<view class="goods-img">
						<u-image width="178rpx" class="uimage" height="178rpx" :src="currentProduct.image"></u-image>
					</view>

					<view class="goods-price">
						<span class="lsj">零售价 </span>
						<span class="price">{{JSON.stringify(currentskuid) == '{}' ? currentProduct.price :
							currentskuid.price}}</span>
					</view>

					<view class="goods-kc">
						<span>库存1531件</span>
					</view>

					<view class="goods-spgg"> 请选择 商品规格 </view>
				</view>

				<view class="goods-sku">
					<view class="skutitle">商品规格</view>

					<view class="skulist">
						<view class="skulistitem" v-for="item in skulist" :key="item.id"
							:class="item.id == currentskuid.id ? 'skulight' : ''" @click="handleskuclick(item)">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="numbox">
					<view class="numboxtitle">购买数量</view>
					<uni-number-box class="uNumber" :min="0" :max="999" v-model="num"></uni-number-box>
				</view>

				<view class="btns">
					<view class="box-btn-card" @click="addToCartOrBuy('cart')">加入购物车</view>
					<view class="box-btn-buy" @click="addToCartOrBuy('buy')">立即购买</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	getProducts,
	productSpecifications,
	storeTypeList
} from "@/api/goods.js";
import {
	getIndexType
} from "@/api/home.js";
import uniNumberBox from "@/components/uni-number-box";
export default {
	data() {
		return {
			currentId: '',
			tabList: [],
			categoryList: [],
			background: {
				backgroundColor: "rgb(25, 189, 93)",
			},
			currentProduct: {},
			params: {
				typeId: '',
				page: 1,
				limit: 10
			},
			carshow: false,
			skulist: [],
			currentskuid: {},
			num: 1,
		};
	},
	components: {
		uniNumberBox,
	},

	// onReachBottom() {
	// 	console.log(123)
	// },
	onLoad(val) {
		if (val.id) {
			this.currentId = val.id;
			this.params.typeId = val.id
		}

		// #ifdef MP-WEIXIN
		// 小程序默认分享
		uni.showShareMenu({
			withShareTicket: true,
		});
		// #endif
	},

	onShow() {
		this.categoryList = []
		this.loadData();

	},
	methods: {
		handleScrolltoupper() {
			this.params.page = this.params.page + 1;

			this.loadListContent()
		},

		/**
		 * 查询
		 */
		search() {
			uni.navigateTo({
				url: "/pages/navigation/search/searchPage",
			});
		},

		/**
		 * 加载图片
		 */
		async loadData() {
			let list = await getIndexType();
			this.tabList = list.data;
			// 如果是从首页的分类过来
			if (!this.currentId) {
				this.currentId = list.data[0].id;
				this.params.typeId = list.data[0].id
			}

			this.loadListContent();
		},

		goTodetail(items) {
			uni.navigateTo({
				url: `/pages/product/goods?id=${items}`,
			});
		},

		/**
		 * 加载列表内容
		 */
		loadListContent() {
			getProducts({
				...this.params
			}).then(res => {
				if (res.data.list.length > 0) {
					this.categoryList.push(...res.data.list)
				} else {
					this.params.page = this.params.page - 1;

					uni.showToast({
						icon: "none",
						title: this.params.page == 0 ? '暂无数据' : '暂无更多'
					})
				}

			})
		},
		/**
		 * 一级分类点击
		 */
		tabtap(item, i) {
			if (item.id != this.currentId) {
				this.currentId = item.id;
				this.categoryList = []
				this.params.page = 1;
				this.params.typeId = item.id
				this.loadListContent();
			}
		},

		jindian(product) {
			uni.navigateTo({
				url: "/pages/product/shopPage?id=" + product.storeId
			})
		},

		showProductguige(product) {

			uni.showLoading({
				title: "加载中",
			});
			this.currentProduct = {
				...product
			};

			productSpecifications({
				id: product.id
			}).then(res => {

				uni.hideLoading();
				this.skulist = res.data || []
				this.carshow = true;
				this.currentskuid = {};
				this.num = 1
			})




		},

		handleskuclick(item) {
			this.currentskuid = item;
			this.num = 1
		},

		addToCartOrBuy(type) {
			if (type == "cart") {

				if (!this.currentskuid.id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择规格'
					})
				}
				if (this.num == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择数量'
					})
				}

				const currentCart = uni.getStorageSync("currentCart") || [];


				currentCart.push({
					num: this.num,
					currentskuid: this.currentskuid,
					product: this.currentProduct
				})
				uni.setStorageSync("currentCart", currentCart);

				uni.showToast({
					icon: "none",
					title: "添加成功"
				})
			}
			if (type == "buy") {
				// 判断是否有地址

				if (!this.currentskuid.id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择规格'
					})
				}
				if (this.num == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择数量'
					})
				}


				uni.setStorageSync("currentBuy", {
					products: [{
						num: this.num,
						currentskuid: this.currentskuid,
						product: this.currentProduct
					}]
				});
				uni.navigateTo({
					url: `/pages/order/fillorder?way=BUY_NOW`,
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: rgb(244, 244, 244);
}

.navbar-solt-div {
	width: 100%;
	height: 200rpx;
	position: relative;
}

/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
	display: none;
}

/* #endif */
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
}

/* #endif */
.s-list {
	box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}

.nav-search {
	// padding-left: 30rpx !important;
	// padding-right: 20rpx !important;
	width: 615rpx;
	height: 61rpx;
	position: absolute;
	left: 32rpx;
	bottom: 21rpx;
}

.searchText {
	position: absolute;
	right: 20rpx;
	bottom: 38rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 29rpx;
	color: #ffffff;
}

.title {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 28rpx;
	position: absolute;
	top: 50rpx;

	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 37rpx;
	color: #ffffff;
}

.category-wrap {
	height: 100%;

	.content {
		height: calc(100vh - 140px);
		display: flex;
		color: #333;
		font-size: 28rpx;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200rpx;
		height: 100%;
		background-color: rgb(232, 232, 232);
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 97rpx;
		position: relative;

		&.active {
			font-weight: bold;
			color: $light-color;
			background: #fff;
			border-left: 8rpx solid rgb(40, 186, 100);
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding: 30rpx 20rpx 140rpx 20rpx;
	}

	.top-img {
		width: 500rpx;
		height: 230rpx;
		border-radius: 8px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding-top: 16rpx;
		font-weight: 500;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	.margin-right {
		margin-right: 0 !important;
	}

	.t-item {
		width: 554rpx;
		height: 226rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 12rpx;

		/deep/ .u-image {
			width: 197rpx !important;
			height: 197rpx !important;
			border-radius: 20rpx !important;
		}
	}

	.productimg {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 13rpx;
	}

	.producttext {
		height: 70rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 25rpx;
		color: #282a2e;
		line-height: 47rpx;
		position: absolute;
		top: 28rpx;
		left: 228rpx;
	}

	.productprice {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #f74600;
		position: absolute;
		bottom: 26rpx;
		left: 227rpx;
	}

	.proItems_car {
		width: 200rpx;
		height: 41rpx;
		position: absolute;
		bottom: 26rpx;
		right: 25rpx;
		text-align: right;
	}

	.carshowview {
		width: 100%;
		height: 840rpx;
		overflow-y: auto;
		position: relative;

		.goods-header {
			width: 100%;
			position: relative;
			height: 233rpx;
			border-bottom: 1px solid #f3f3f3;
		}

		.goods-img {
			width: 178rpx;
			height: 178rpx;
			position: absolute;
			top: 21rpx;
			left: 21rpx;
		}

		.goods-price {
			position: absolute;
			top: 42rpx;
			left: 223rpx;
		}

		.lsj {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			line-height: 50rpx;
		}

		.price {
			font-family: Microsoft YaHei;
			font-weight: bold;
			font-size: 35rpx;
			color: #f76e00;
			padding-left: 20rpx;
		}

		.goods-kc {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			opacity: 0.7;
			position: absolute;
			top: 93rpx;
			left: 224rpx;
		}

		.goods-spgg {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			line-height: 44rpx;
			position: absolute;
			top: 140rpx;
			left: 224rpx;
		}

		.goods-sku {
			width: 100%;
			height: 375rpx;
			overflow-y: auto;
			border-bottom: 1px solid #f3f3f3;
			position: relative;
		}

		.skutitle {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;

			padding-top: 24rpx;
			padding-left: 26rpx;
		}

		.skulist {
			padding-left: 26rpx;
			margin-top: 29rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-content: flex-start;
		}

		.skulistitem {
			min-width: 254rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 25rpx;
			color: #666666;
			cursor: pointer;
			border: 1px solid #f3f3f3;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
		}

		.skulight {
			border: 1px solid rgb(25, 189, 93);
		}
	}

	.numbox {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.numboxtitle {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
	}

	.btns {
		width: 680rpx;
		height: 87rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFang;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		bottom: 15rpx;
	}

	.box-btn-card {
		height: 100%;
		width: 50%;
		background-color: rgb(245, 181, 64);
		line-height: 87rpx;
		text-align: center;
		border-radius: 40rpx 0 0 40rpx;
	}

	.box-btn-buy {
		height: 100%;
		width: 50%;
		background-color: rgb(103, 194, 66);
		line-height: 87rpx;
		text-align: center;
		border-radius: 0 40rpx 40rpx 0;
	}
}
</style>
